<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse value="0" accordion>
          <Panel>
            弹出层配置
            <div slot="content">
              <Tooltip content="如果无反应，可点击重载组件后再尝试" placement="top" style="width: 100%;">
                <Button type="default" long @click="designerShowAndHide">设计器内显示</Button>
              </Tooltip>
              <div class="m-b-10px"></div>

              <Form :label-width="150">
                <FormItem label="选择类型">
                  <Select size="small" v-model="type">
                    <Option value="single">单选</Option>
                    <Option value="multiple">多选</Option>
                    <Option value="range">范围选择</Option>
                  </Select>
                </FormItem>
                <FormItemPanel title="多选或范围选择配置" v-show="type == 'multiple' || type == 'range'">
                  <FormItem label="最多可选天数">
                    <InputNumber size="small" :max="100" :min="1" v-model="maxRange" :active-change="false"></InputNumber>
                  </FormItem>
                  <FormItem label="提示文案">
                    <Input size="small" v-model="rangePrompt"/>
                  </FormItem>
                </FormItemPanel>
<!--                <FormItem label="日期格式化">
                  <Input size="small" v-model="formatting"/>
                </FormItem>-->
                <FormItem label="标题">
                  <Input size="small" v-model="title" placeholder=""/>
                </FormItem>
                <FormItem label="主题配色">
                  <PnColorPicker size="small" v-model="color" alpha recommend/>
                </FormItem>
                <FormItem label="日期行高">
                  <InputNumber size="small" :max="360" :min="10" v-model="rowHeight" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="显示月份背景水印">
                  <i-switch size="small" v-model="showMark"></i-switch>
                </FormItem>
                <FormItem label="是否展示日历标题">
                  <i-switch size="small" v-model="showTitle"></i-switch>
                </FormItem>
                <FormItem label="是否展示日历副标题">
                  <i-switch size="small" v-model="showSubtitle"></i-switch>
                </FormItem>
                <FormItem label="是否展示确认按钮">
                  <i-switch size="small" v-model="showConfirm"></i-switch>
                </FormItem>
                <FormItem label="确认按钮的文字">
                  <Input size="small" v-model="confirmText" placeholder=""/>
                </FormItem>

                <FormItem label="弹出位置">
                  <Select size="small" v-model="position">
                    <Option value="top">顶部</Option>
                    <Option value="bottom">底部</Option>
                    <Option value="left">左侧</Option>
                    <Option value="right">右侧</Option>
                  </Select>
                </FormItem>
                <FormItem label="是否显示圆角弹窗">
                  <i-switch size="small" v-model="round"></i-switch>
                </FormItem>
                <FormItem label="是否可点击遮罩层关闭">
                  <i-switch size="small" v-model="closeOnClickOverlay"></i-switch>
                </FormItem>
                <FormItem label="是否开启底部安全区适配">
                  <i-switch size="small" v-model="safeAreaInsetBottom"></i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            输入框配置
            <div slot="content">
              <Form :label-width="90">
                <FormItem label="尺寸">
                  <Select :transfer="true" size="small" v-model="inputConfig.size">
                    <Option value="default">默认</Option>
                    <Option value="small">小尺寸</Option>
                    <Option value="large">大尺寸</Option>
                  </Select>
                </FormItem>
                <FormItem label="占位文本">
                  <Input size="small" v-model="inputConfig.placeholder"/>
                </FormItem>
                <FormItemPanel title="样式配置">
                  <FormItem label="放大倍率">
                    <Tooltip content="可将组件进行等比例放大" placement="left">
                      <InputNumber size="small" :max="10" :min="0" :step="0.1" v-model="inputConfig.inputStyle.scaleValue" :active-change="false"></InputNumber> 倍
                    </Tooltip>
                  </FormItem>
                  <FormItem label="宽度">
                    <Input size="small" v-model="inputConfig.inputStyle.width"/>
                  </FormItem>
                  <FormItem label="背景色">
                    <PnColorPicker size="small" v-model="inputConfig.inputStyle.backgroundColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="文本色">
                    <PnColorPicker size="small" v-model="inputConfig.inputStyle.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="边框颜色">
                    <PnColorPicker size="small" v-model="inputConfig.inputStyle.borderColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
        </Collapse>

      </TabPane>

      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument>
            <div slot="custom">
              <p><Tag color="success">this.Calendar</Tag>日期组件的实例</p>
              <p><Tag color="success">this.value</Tag>存储组件选中后的值，Date类型</p>
            </div>
          </CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="点击确认或选择完毕后触发">
            <InteractionSender :interactionKey="'itemConfirm'" :canAddFieldsMap="false"></InteractionSender>
            <Alert show-icon style="padding-right: 10px;">通过value可获取选中值，selectedData为已选项的原始Date对象集合</Alert>
            <CodeEditor v-model="onConfirmCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'VanCalendarCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {
      designerShowAndHide () {
        this.$EventBus.$emit('pn_show_van_calendar_m_'+this.id)
      }
    },
    computed: {
      ...mapFields({

        inputConfig: 'component.compConfigData.inputConfig',

        type: 'component.compConfigData.type',
        title: 'component.compConfigData.title',
        color: 'component.compConfigData.color',
        rowHeight: 'component.compConfigData.rowHeight',
        showMark: 'component.compConfigData.showMark',
        showTitle: 'component.compConfigData.showTitle',
        showSubtitle: 'component.compConfigData.showSubtitle',
        showConfirm: 'component.compConfigData.showConfirm',
        confirmText: 'component.compConfigData.confirmText',
        confirmDisabledText: 'component.compConfigData.confirmDisabledText',

        position: 'component.compConfigData.position',
        round: 'component.compConfigData.round',
        closeOnClickOverlay: 'component.compConfigData.closeOnClickOverlay',
        safeAreaInsetBottom: 'component.compConfigData.safeAreaInsetBottom',
        getContainer: 'component.compConfigData.getContainer',

        maxRange: 'component.compConfigData.maxRange',
        rangePrompt: 'component.compConfigData.rangePrompt',

        // formatting: 'component.compConfigData.formatting',

        onConfirmCode: 'component.compConfigData.onConfirmCode',

      })
    }
  }
</script>

<style scoped>

</style>
